<template>
	<view class="content">
		<view class="section-0">
			<view class="section-body">
				<view class="project-name" @click="go('/pages/common/project_select/index')">
					<text class="iconfont icon-qiehuan"></text>
					{{ curProject.project_name }}
				</view>
				<!-- <view class="weather">
					-1°C-8°C 晴
				</view> -->
			</view>
		</view>
		<view class="section-1">
			<banner @toPlace="toPlace" :info="this.info" ref="banner" :whether='whether'></banner>
		</view>
		<!-- <view class="section-2">
			<view class="form">
				<view class="form-item">
					<view class="label">项目名称</view>
					<view class="shape"></view>
					<view class="input">
						<u--input
							placeholderClass="input-placeholder"
							class="input-body"
						    v-model="name"
						  ></u--input>
					</view>
				</view>
				<view class="actions">
					<view class="action">
						<text>重</text>
						<text>置</text>
					</view>
					<view class="action search">
						<text>查</text>
						<text>询</text>
					</view>
				</view>
			</view>
		</view> -->
		<view class="section-4">
			<view class="tab">
				<view
					@click="setCurIdx(idx, item.type)"
					:class="`item ${curIdx === idx ? 'item__active' : ''} ${curIdx + 1 === idx ? 'item__active_next' : ''}`"
					v-for="(item, idx) in tabList"
					:key="item.type"
				>
					<view class="label">
						<image v-if="item.type === 'work'" mode="aspectFit" src="../../../src/imgs/work-center-manager-tab-cion1.png"></image>
						<image v-if="item.type === 'data'" mode="aspectFit" src="../../../src/imgs/work-center-manager-tab-cion2.png"></image>
						{{ item.name }}
					</view>
					<view class="shape">
						<view class="shape-body"></view>
					</view>
					<view class="shape shape-mirrow">
						<view class="shape-body"></view>
					</view>
				</view>
			</view>
			<view class="list">
				<view :class="`list-body ${curIdx === 0 ? 'list-body_prev' : 'list-body_next'}`">
					<view @click="go(item.path, item.type)" class="item" v-for="item in contentList[curType]" :key="item.id">
						{{ item.name }}
					</view>
				</view>
			</view>
		</view>
		<view class="section-3">
			<view class="tab">
				<view @click="setCurProjectTab(item.id)" :class="`item ${item.id === curTabId ? 'item__active' : ''}`" v-for="item in list" :key="item.id">{{ item.name }}</view>
			</view>
			<view class="project-container" v-if="showArea">
				<view class="arrow" :style="{ left: `calc(${20 * (curTabId - 1) + 10}% - 12rpx)` }"></view>
				<view
					@click="go(item.path)"
					:class="`item ${item.disabled ? 'item__disabled' : ''} ${item.time ? '' : 'item__notime'}`"
					v-for="item in projectList[curTabId]"
					:key="item.name"
				>
					<view class="left">
						<view class="name">{{ item.name }}</view>
					</view>
					<view class="right">
						<text class="iconfont icon-xiangyou1"></text>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="section-5" v-if="curProject.project_name === '大跨越线路工程'">
			<view class="video-tab">
				<view class="label">
					远程视频
				</view>
				<view class="buttons">
					<view @click="setCurVideo(item)" :class="`button ${curVideo.id === item.id ? 'button__active' : ''}`" v-for="item in videoList" :key="item.id">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="video">
				<video  v-for="item in videoList" v-if="curVideo.id === item.id" :src="item.url" class="myVideo"  page-gesture autoplay></video>
			</view>
		</view> -->
		<u-popup mode="center" :show="showProject" @close="closeProjectPop" :round="50">
			<view class="pop project-pop">
				<view class="title">
					<text>请选择项目</text>
				</view>
				<view class="body">
					<view class="wrapper _scroll">
						<view class="item" v-for="(item, idx) in projectSelectList" :key="item.id" @click="handleSelectProject(idx)">
							<view :class="`check ${selectedProject.indexOf(idx) !== -1 ? 'check__active' : ''}`">
								<view class="check-on"></view>
							</view>
							<view class="name">{{ item.project_name }}</view>
						</view>
					</view>
				</view>
				<view class="custom-button" @click="confirmSelectUser()">确认</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { projectSelectListApi, projectInfoApi } from '@/api/project.js'
import { userListApi } from '@/api/user.js'
import banner from '@/components/indexBanner/index.vue'
export default {
	components: {
		banner
	},
	data() {
		return {
			projecttype: '',
			info: {},
			audioOff: false,
			indicatorDots: true,
			autoplay: true,
			interval: 5000,
			duration: 500,
			name: '',
			showArea: false,
			showVideo: true,
			list: [
				{ id: 1, name: '项目前期' },
				{ id: 2, name: '工程前期' },
				{ id: 3, name: '建设施工' },
				{ id: 4, name: '启动验收' },
				{ id: 5, name: '总结评价' }
			],
			curTabId: 0,
			tabList: [
				{ type: 'work', name: '常用工作' },
				{ type: 'data', name: '资料库' }
			],
			contentList: {
				work: [
					{ name: '项目管控卡', id: 4, type: 'report' },
					{
						name: '履职',
						id: 1,
						path: '/pages/work/manager/work_manage/duty/index'
					},
					{
						name: '会议',
						id: 2,
						path: '/pages/work/manager/work_manage/meeting/index'
					},
					{
						name: '检查',
						id: 3,
						path: '/pages/work/manager/work_manage/check/index'
					}
				],
				data: [
					{
						name: '标准规范',
						id: 5,
						path: '/pages/statistics/comprehensive/rule/index'
					},
					{
						name: '经验分享',
						id: 6,
						path: '/pages/statistics/comprehensive/share/index'
					},
					{
						name: '技术标准',
						id: 7,
						path: '/pages/statistics/comprehensive/rule/technicalDocumentation'
					}
				]
			},
			curIdx: 0,
			curType: 'work',
			curVideo: {
				name: '南岸1',
				id: 1,
				url: 'rtmp://58.215.235.4:1957/live/southVideo1'
			},
			videoList: [
				{
					name: '南岸1',
					id: 1,
					url: 'rtmp://58.215.235.4:1957/live/southVideo1'
				},
				{
					name: '北岸1',
					id: 2,
					url: 'rtmp://58.215.235.4:1957/live/northVideo1'
				}
			],
			projectSelectList: [],
			selectedProject: [],
			showProject: false,
			projectList: {
				1: [
					{
						name: '人员管理',
						path: '/pages/work/manager/project_prev/import/index'
					},
					{
						name: '可研批复',
					 path: '/pages/work/manager/engineering_prev/feasibility/study'
					},
					{
						name: '核准批复',
						path: '/pages/work/manager/engineering_prev/feasibility/approval'
					},

					//   {
					//     name: "核对年度计划",
					//     path: "/pages/work/manager/engineering_prev/reply/index?type=3",
					//   },
					// {
					//   name: "可研设计和评审进度",
					//   disabled: true,
					//   path: "/pages/work/manager/engineering_prev/reply/index?type=4",
					// },
					{ name: '前期资料文件', path: '/pages/work/manager/engineering_prev/reply/new_file' }
				],
				2: [
					{
						name: '任务计划书',
						path: '/pages/statistics/progress/plan/info/index'
					},
					{
						name: '可研和初步设计',
						path: '/pages/work/manager/engineering_prev/review/index'
					},
					// {name: '物资采购计划', disabled: true},
					// {name: '政处对接', disabled: true},
					// {name: '项目清单', disabled: true},
					{
						name: '四通一平',
						path: '/pages/work/manager/engineering_prev/details/details'
					},
					{ name: '招标批次', path: '/pages/work/manager/procurement/index' },
					// {
					// 	name: '行政许可手续',
					// 	// path: '/pages/work/manager/engineering_prev/administrativeLicensing/index',
					// 	disabled: true
					// }
				],
				3: [
					{
						name: '安全管理',
						path: '/pages/work/manager/construction/safety/index'
					},
					{
						name: '质量管理',
						// disabled: true,
						path: '/pages/work/manager/construction/quality/index'
					},
					{
						name: '进度管理',
						path: '/pages/work/manager/construction/progress/index'
					},
					{
						name: '技术管理',
						path: '/pages/work/manager/construction/tec/index'
						// disabled: true,
					},
					{
						name: '造价管理',
						path: '/pages/work/manager/construction/manufacturing/index'
					},
					{
						name: '队伍管理',
						path: '/pages/work/manager/construction/team/index'
					},
					{
						name: '物资管理',
						path: '/pages/work/manager/construction/material/index'
					}
				],
				4: [
					{ name: '启动会', disabled: true },
					{ name: '设备增资', disabled: true }
				],
				5: [
					{ name: '尾工管理', disabled: true },
					{ name: '竣工图纸', disabled: true },
					{ name: '工程结算', disabled: true },
					{ name: '竣工决算审计', disabled: true },
					{ name: '项目关闭', disabled: true },
					{ name: '工程创优', disabled: true }
				]
			},
			whether:true
		}
	},
	computed: {
		...mapGetters({
			curProject: 'system/getCurProject',
			curRole: 'system/getCurRole',
			userInfo: 'system/getUserInfo'
		})
	},
	onNavigationBarButtonTap(res) {
		uni.showToast({
			title: '功能开发中...',
			icon: 'none'
		})
	},
	//  onBackPress() {
	//   // uni.navigateBack({
	//   // 	delta: 2
	//   // })
	//   if (this.curRole === '项目经理') {
	// 	uni.navigateBack({
	// 		delta: 2
	// 	})
	//   }
	// // return true;
	//  },
	methods: {
		...mapActions({ setCurProject: 'system/setCurProject' }),
		toPlace() {
			this.go('/pages/statistics/project/place/index?name=' + this.curProject.project_name + '&id=' + this.curProject.id)
		},
		async fetchInfo() {
			uni.showLoading({
				title: '加载中...'
			})
			const { data } = await projectInfoApi({
				id: this.curProject.id
			})
			this.projecttype = data.data[0].project_type
			uni.setStorageSync('projecttype', this.projecttype)
			this.info = data.data[0]
			this.$refs.banner.fetchList()
			uni.hideLoading()
		},
		go(path, type) {
			if (type === 'report') {
				uni.navigateTo({
					url: '/pages/statistics/project/manage/index?id=' + this.curProject.id + '&name=' + this.curProject.project_name
				})
			} else {
				uni.navigateTo({
					url: path
				})
			}
		},
		setCurVideo(item) {
			this.showVideo = false
			this.curVideo = item
			setTimeout(() => {
				this.showVideo = true
			})
		},
		setCurProjectTab(id) {
			if (this.curTabId === id) {
				this.curTabId = 0
				this.showArea = false
			} else {
				this.curTabId = id
				this.showArea = true
			}
		},
		confirmSelectUser() {
			this.setCurProject(this.projectSelectList[this.selectedProject[0]])
			this.closeProjectPop()
		},
		handleSelectProject(idx) {
			this.selectedProject = [idx]
		},
		async fetchList() {
			let params = {}
			if (this.curRole === '项目经理') {
				params.link_user = this.userInfo.user_name
				params.type = '项目经理'
			}
			uni.showLoading({ title: '加载中...' })

			const { data } = await projectSelectListApi(params)
			uni.hideLoading()
			if (data.code === 1) {
				this.projectSelectList = data.data
				if (this.curProject.id === '') {
					this.setCurProject(this.projectSelectList[0].children[0])
					this.curProject.id === this.projectSelectList[0].children[0].id
					this.fetchInfo()
				}
			}
		},
		async showProjectPop() {
			this.showProject = true
		},
		closeProjectPop() {
			this.showProject = false
		},
		setCurIdx(idx, type) {
			this.curIdx = idx
			this.curType = type
		},
		changeIndicatorDots(e) {
			this.indicatorDots = !this.indicatorDots
		},
		changeAutoplay(e) {
			this.autoplay = !this.autoplay
		},
		intervalChange(e) {
			this.interval = e.target.value
		},
		durationChange(e) {
			this.duration = e.target.value
		}
	},
	onReady() {
		if (this.curRole === '项目经理') {
			this.curTabId = 1
			this.showArea = true
		}
		this.fetchList()
	},
	onBackPress() {
		if (this.curRole === '项目经理') {
			uni.switchTab({
				url: '/pages/statistics/index'
			})
		} else {
			uni.navigateBack({
				delta: 2
			})
		}
		return true
	},
	onShow() {
		this.fetchInfo()
	}
}
</script>
<style>
.myVideo {
	width: 100vw;
	height: 300px;
}
</style>
<style lang="scss" scoped>
// #myVideo{
// 	height: 700px;
// }
.pop {
	width: 671rpx;
	padding-bottom: 40rpx;
	background-color: #fff;
	border-radius: 35rpx;
	overflow: hidden;
	.title {
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		background-color: #1534ce;
		font-size: 42rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 4rpx;
		color: #ffffff;
		text-align: center;
	}
}
.project-pop {
	.body {
		padding: 40rpx 50rpx;
		.wrapper {
			width: 100%;
			height: 540rpx;
			overflow-y: auto;
			overflow-x: hidden;
		}
		.item {
			width: auto;
			margin-bottom: 20rpx;
			@include clear();
			.check {
				width: 24rpx;
				height: 24rpx;
				border: solid 1rpx #000000;
				border-radius: 50%;
				float: left;
				position: relative;
				top: 7rpx;
				.check-on {
					transition: 0.3s ease;
					opacity: 0;
					transform: scale(0.5);
					border-radius: 50%;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
					width: 18rpx;
					height: 18rpx;
					background-color: #000000;
				}
			}
			.name {
				width: calc(100% - 54rpx);
				float: left;
				height: 40rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				font-size: 30rpx;
				font-weight: 300;
				font-stretch: normal;
				line-height: 40rpx;
				letter-spacing: 0rpx;
				color: #000000;
				margin-left: 20rpx;
			}
			.check__active {
				.check-on {
					opacity: 1;
					transform: scale(1);
				}
			}
		}
	}
}
.tab-space {
	width: 100%;
	height: 140rpx;
}
.section-5 {
	.video-tab {
		width: 670rpx;
		margin-left: 40rpx;
		margin-bottom: 22rpx;
		@include clear();
		.label {
			float: left;
			display: inline-block;
			font-size: 26rpx;
			font-weight: bold;
			font-stretch: normal;
			line-height: 48rpx;
			letter-spacing: 0rpx;
			color: #3b3c40;
			border-bottom: 3rpx solid #95c4fa;
		}
		.buttons {
			float: left;
			.button {
				padding: 0 20rpx;
				height: 48rpx;
				background-color: #395cf5;
				border-radius: 20rpx;
				float: left;
				line-height: 48rpx;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: #ffffff;
				transition: 0.3s ease;
				margin-left: 13rpx;
			}
			.button__active {
				background-color: #1534ce;
			}
		}
	}
	.video {
		width: 100%;
		// height: 700rpx;
		// background-color: #fff;
		position: relative;

		.audio {
			position: absolute;
			right: 40rpx;
			top: 25rpx;
			z-index: 10;
			.iconfont {
				font-size: 48rpx;
				color: #fff;
			}
		}
		.full {
			position: absolute;
			right: 40rpx;
			bottom: 25rpx;
			z-index: 10;
			.iconfont {
				font-size: 48rpx;
				color: #fff;
			}
		}
	}
}
.section-4 {
	width: 670rpx;
	margin-left: 40rpx;
	margin-top: 30rpx;
	box-shadow: 0 0 28rpx 14rpx rgba(#bcbcb5, 0.17);
	border-radius: 50rpx;
	overflow: hidden;
	margin-bottom: 30rpx;
	position: relative;
	.list {
		width: 100%;
		height: 100rpx;
		background-color: #1534ce;
		.list-body {
			width: 100%;
			height: 100rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-around;
			.item {
				height: 100rpx;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: #8497ac;
				text-align: center;
				line-height: 100rpx;
				position: relative;
				&::after {
					content: '';
					position: absolute;
					width: 1rpx;
					height: 38rpx;
					background-color: #7899b0;
					z-index: 10;
					right: -70rpx;
					top: 34.5rpx;
				}
			}
		}
		.list-body_prev {
			border-top-right-radius: 50rpx;
		}
		.list-body_next {
			border-top-left-radius: 50rpx;
		}
	}
	.tab {
		height: 110rpx;
		background-color: #1534ce;
		width: 670rpx;
		border-top-right-radius: 50rpx;
		border-top-left-radius: 50rpx;
		overflow: hidden;
		.item {
			width: 50%;
			float: left;
			height: 110rpx;
			background-color: #1534ce;
			position: relative;
			.label {
				position: relative;
				z-index: 10;
				box-sizing: border-box;
				text-align: center;
				width: 100%;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: #ffffff;
				padding-top: 25rpx;
				vertical-align: middle;
				transition: 0.3s ease;
				opacity: 0.5;
				image {
					width: 50rpx;
					height: 50rpx;
					margin-right: 10rpx;
					position: relative;
					top: 15rpx;
					transition: 0.3s ease;
					filter: grayscale(100%);
				}
			}
			.count {
				position: relative;
				z-index: 10;
				box-sizing: border-box;
				padding-left: 10%;
				font-size: 58rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: #ffdc00;
				font-weight: bold;
				text {
					font-family: SourceHanSansCN-Regular;
					font-size: 26rpx;
					font-weight: normal;
					letter-spacing: 0rpx;
					color: #ffffff;
				}
			}
			.shape {
				z-index: 1;
				width: 50rpx;
				height: 50rpx;
				position: absolute;
				bottom: 0;
				left: -50rpx;
				background: #000;
				display: none;
				background-color: #fff;
				overflow: hidden;
				.shape-body {
					width: 50rpx;
					height: 50rpx;
					background-color: #1534ce;
					border-bottom-right-radius: 50rpx;
				}
			}
			.shape-mirrow {
				z-index: 1;
				left: 0;
				display: none;
				.shape-body {
					border-bottom-right-radius: 0rpx;
					border-bottom-left-radius: 50rpx;
				}
			}
		}
		.item__active {
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			background-color: #fff;

			.label {
				color: #3d5779;
				opacity: 1;
				image {
					filter: grayscale(0%);
				}
			}
			.shape {
				display: block;
			}
			.shape-mirrow {
				display: none;
			}
		}
		.item__active_next {
			border-bottom-right-radius: 50rpx;
			.shape {
				display: none;
			}
			.shape-mirrow {
				display: block;
			}
		}
	}
}
.section-3 {
	width: 100%;
	padding-top: 35rpx;
	position: relative;
	z-index: 50;
	.project-container {
		position: absolute;
		width: 670rpx;
		top: 150rpx;
		left: 40rpx;
		z-index: 90;
		background-color: #1433cd;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 24rpx;
		z-index: 20;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.arrow {
			transition: 0.3s ease;
			position: absolute;
			top: -12rpx;
			left: 0;
			content: '';
			border-bottom: 12rpx solid #1433cd;
			border-left: 12rpx solid transparent;
			border-right: 12rpx solid transparent;
		}
		.item {
			width: 300rpx;
			height: 90rpx;
			background-color: #ffffff;
			border-radius: 35rpx;
			box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
			box-sizing: border-box;
			@include clear();
			margin-bottom: 23rpx;
			.left {
				float: left;
				width: 226rpx;
				height: 100%;
				box-sizing: border-box;
				padding-left: 30rpx;
				display: flex;
				align-items: center;
				.name {
					width: 100%;
					font-size: 26rpx;
					font-weight: bold;
					font-stretch: normal;
					line-height: 30rpx;
					letter-spacing: 0rpx;
					color: #46464a;
				}
			}
			.right {
				width: 20rpx;
				height: 100%;
				float: right;
				margin-right: 30rpx;
				color: #3b3c40;
				display: flex;
				align-items: center;
				.iconfont {
					font-size: 32rpx;
				}
			}
		}
		// .item__notime{
		// 	height: 90rpx;
		// 	.left{
		// 		.name{
		// 			height: 30rpx;
		// 			line-height: 30rpx;
		// 		}
		// 		.time{
		// 			display: none;
		// 		}
		// 	}
		// 	.right{
		// 		height: 30rpx;
		// 		line-height: 30rpx;
		// 	}
		// }
		.item__disabled {
			.left {
				opacity: 0.25;
			}
			.right {
				opacity: 0.25;
			}
		}
	}
	.tab {
		width: 670rpx;
		height: 100rpx;
		background-color: #1534ce;
		box-shadow: 0rpx 13rpx 35rpx 0rpx rgba(60, 90, 214, 0.42);
		border-radius: 35rpx;
		margin-left: 40rpx;
		@include clear();
		position: relative;
		.item {
			float: left;
			width: 20%;
			font-size: 26rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0rpx;
			color: #ffffff;
			line-height: 100rpx;
			text-align: center;
			position: relative;
			&::after {
				content: '';
				position: absolute;
				width: 1rpx;
				height: 38rpx;
				background-color: #3c5ad6;
				z-index: 10;
				right: 0rpx;
				top: 31rpx;
			}
			&::before {
				content: '';
				width: 104rpx;
				height: 4rpx;
				background: #ffde00;
				position: absolute;
				left: 0;
				right: 0;
				margin: 0 auto;
				bottom: 18rpx;
				transition: 0.3s ease;
				opacity: 0;
				transform: translateY(-4rpx);
			}
		}
		.item__active {
			&::before {
				opacity: 1;
				transform: translateY(0rpx);
			}
		}
	}
}
.section-2 {
	width: 100%;
	background-color: #fff;
	background-repeat: no-repeat;
	border-top-left-radius: 50rpx;
	border-top-right-radius: 50rpx;
	overflow: hidden;
	box-sizing: border-box;
	box-shadow: 0 -28rpx 28rpx 14rpx rgba(#bcbcb5, 0.17);
	margin-top: 30rpx;
	.form {
		width: 600rpx;
		margin-left: 75rpx;
		padding-top: 40rpx;
		box-sizing: border-box;
		border-bottom: 2rpx solid #d8e4f2;
		.form-item {
			width: 600rpx;
			height: 48rpx;
			border-radius: 20rpx;
			border: solid 2rpx #1534ce;
			margin: 0 auto;
			margin-bottom: 34rpx;
			@include clear();
			.label {
				float: left;
				width: 134rpx;
				height: 48rpx;
				text-align: center;
				line-height: 44rpx;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: #1534ce;
			}
			.shape {
				width: 3rpx;
				height: 32rpx;
				background-color: #7f98ae;
				float: left;
				margin-top: 8rpx;
			}
			.input {
				float: left;
				width: calc(100% - 134rpx - 3rpx);
				.input-body {
					box-sizing: border-box;
					width: 100%;
					height: 44rpx;
					padding: 0 !important;
					border: none;
					padding-left: 30rpx !important;
					padding-right: 30rpx !important;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: rgba(0, 0, 0, 0.7);
				}
				.input-placeholder {
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: rgba(0, 0, 0, 0.5);
				}
			}
		}
		.actions {
			width: 100%;
			height: 50rpx;
			margin-top: 29rpx;
			padding-bottom: 40rpx;
			display: flex;
			justify-content: space-between;
			.action {
				width: 288rpx;
				height: 48rpx;
				background-color: #395cf5;
				border-radius: 20rpx;
				text-align: center;
				line-height: 48rpx;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				color: #ffffff;
				text {
					&:first-child {
						margin-right: 20rpx;
					}
				}
			}
			.search {
				background-color: #1534ce;
			}
		}
	}
}
.section-0 {
	width: 100%;
	background-color: #2e5efe;
	.section-body {
		width: 100%;
		padding-left: 40rpx;
		height: 90rpx;
		padding-right: 40rpx;
		background-color: #1534ce;
		background-size: cover;
		background-repeat: no-repeat;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		overflow: hidden;
		box-sizing: border-box;
		.project-name {
			margin-top: 24rpx;
			float: left;
			width: 460rpx;
			height: 42rpx;
			font-size: 26rpx;
			font-weight: light;
			font-stretch: normal;
			line-height: 42rpx;
			letter-spacing: 0rpx;
			color: #ffffff;
			border-bottom: 1px solid #ffffff;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			.iconfont {
				font-weight: normal;
				font-size: 26rpx;
				margin-right: 20rpx;
			}
		}
		.weather {
			float: right;
			height: 42rpx;
			font-size: 26rpx;
			font-weight: light;
			font-stretch: normal;
			line-height: 42rpx;
			letter-spacing: 0rpx;
			color: #ffffff;
			margin-top: 24rpx;
		}
	}
}
.section-1 {
	width: 100%;
	background-color: #fff;
	.total {
		text-align: center;
		width: 100%;
		font-size: 16rpx;
		font-weight: normal;
		font-stretch: normal;
		height: 40rpx;
		line-height: 40rpx;
		letter-spacing: 0rpx;
		color: #8497ac;
		text {
			margin-right: 15rpx;
		}
	}
}
</style>
